<template>
  <div>
    <el-form label-width="80px">
      <el-form-item label="信息描述">
        <el-tag type="warning" >课程模板说明</el-tag>
        <el-tag><a href="https://xaa0310-gui-file.oss-cn-shanghai.aliyuncs.com/excel/2022/07/22/885dba499b4a45f99b23ec18095e1798.xls">点击下载excel模板</a></el-tag>
      </el-form-item>
      <el-form-item label="选择excel">
        <el-upload
          ref="upload"
          :auto-upload="false"
          :action="uploadPath"
          :on-success="handleSuccess"
          class="upload-demo">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button :disabled="flag" style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
          <div slot="tip" class="el-upload__tip">只能上传.xsl文件!!!</div>
        </el-upload>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      flag: false,
      uploadPath: process.env.BASE_API + '/admin/edu/subject/import'// 上传文件的请求路径
    }
  },
  methods: {
    submitUpload() {
      this.flag = true
      // 上传文件按钮单击事件函数
      // 查找到上传组件对象 调用它的submit方法 可以提交上传组件中的文件到action地址
      // this.$refs 可以获取vue渲染范围内的有ref属性值的所有的组件对象
      // this.$refs.ref属性值 获取ref属性值对应的标签对象
      this.$refs.upload.submit()
    },
    handleSuccess(res) {
      this.flag = false// 上传成功取消按钮禁用
      // 清空文件列表
      this.$refs.upload.clearFiles()
      this.$message.success('上传成功')
    }
  }
}
</script>
